<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view>
    <view style="flex: 1; overflow: auto">
      <th-form>
        <view class="blocks" v-for="(item, index) in reviewPostList" :key="index">
          <view class="label">{{ item.documentsPostName }}</view>
          <view class="row" @click="showSelectUser(item, index)">
            <template v-if="state[item.documentsPostCode] && state[item.documentsPostCode].length">
              <wd-tag
                style="
                  padding: 5rpx 10rpx;
                  font-size: 26rpx;
                  border-radius: 6rpx;
                  margin-right: 12rpx;
                  margin-bottom: 10rpx;
                "
                v-for="ite in state[item.documentsPostCode]"
                :key="ite.value"
                type="primary"
              >
                {{ ite.personName }}
              </wd-tag>
            </template>
            <template v-else>
              <view style="color: #666; font-size: 14px">
                {{ '请选择' + item.documentsPostName }}
              </view>
            </template>
          </view>
        </view>
        <th-form-item label="预计完成时间" class="form-demandDesc">
          <uni-datetime-picker
            style="font-size: 14px"
            type="date"
            return-type="string"
            :border="false"
            v-model="form.userTime"
            placeholder="预计完成时间"
          />
        </th-form-item>
        <th-form-item label="说明" class="form-demandDesc">
          <wd-textarea
            v-model="form.reason"
            style="border: 1px solid #f7f7f7; flex: 1; width: 100%; font-size: 14px"
          ></wd-textarea>
        </th-form-item>
      </th-form>
    </view>

    <leaguerPickerPm
      :show="selectUserShow"
      :filtration="true"
      :checked="state[currentType]"
      :nop="100"
      from="taskPerson"
      :returnDeptName="true"
      @hideModal="hideModal"
      @checkLeaguer="checkLeaguer"
    ></leaguerPickerPm>
  </view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { formatByDayjs } from '@/utils/util';
import { useUserStore } from '@/stores/user';
import { selectrdDocumentsPostUser, selectrdDocumentsPostDict } from '@/service/pm-requirement';
const showTaskPop = () => {};
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      rdProjectUserEntity: [];
    },
  },
  addType: {
    type: String,
    default: 'add',
  },
});
const emit = defineEmits(['refreshDetail', 'selected']);
const setting = useSetting();
const currentIndex = ref([0]);
// 提交表单数据
const form = ref({
  rdProjectUserEntity: [],
});
const loading = ref(false);
const init = (params) => {
  form.value = params;
  if (form.value.changesDTOS && form.value.changesDTOS.length) {
    oldrdProjectUserEntity.value = JSON.parse(JSON.stringify(form.value.changesDTOS));

    form.value.rdProjectUserEntity = form.value.changesDTOS;
  } else {
    form.value.rdProjectUserEntity = [];
  }
  selectrdDocumentsPostDictList();
};

const oldrdProjectUserEntity = ref([]);
const selectUserShow = ref(false);
const filterIsShow = ref(false);
const state = ref({});
const hideModal = () => {
  selectUserShow.value = false;
};
const currentType = ref('');
const current = ref({});
const showSelectUser = (item, index) => {
  if ((form.value.status == 1 || form.value.status == 2) && props.addType !== 'add') return;
  currentType.value = item.documentsPostCode;
  current.value = item;
  // currentList.value = item.documentsPost;
  currentIndex.value = index;
  selectUserShow.value = true;
};

const reviewPostList = ref([]);

const selectrdDocumentsPostDictList = async () => {
  try {
    const res = await selectrdDocumentsPostDict({
      webSql: `documents_code = '2'`,
      size: 1000,
    });
    if (res.code !== 0) {
      return;
    }
    reviewPostList.value = res.data.records.filter(
      (item) => item.chooseFlag == 1 && item.documentsPostCode != '123' && item.mainFlag == 0,
    );
    reviewPostList.value.forEach((item) => {
      if (!state.value[item.documentsPostCode]) {
        state.value[item.documentsPostCode] =
          form.value.changesDTOS &&
          form.value.changesDTOS
            .filter((it) => item.documentsPostCode == it.userType)
            .map((item) => {
              item.personName = item.userName;
              item.personCode = item.userCode;
              return item;
            });
      }
    });
  } catch (err) {}
};
const checkLeaguer = (e) => {
  if (e) {
    state.value[currentType.value] = e.map((item) => {
      return {
        personId: item.personId,
        pid: props.addType == 'add' ? item.id : item.pid,
        userName: item.personName,
        userCode: item.personCode,
        personName: item.personName,
        personCode: item.personCode,
      };
    });

    const rdProjectUserEntityList = [];
    e.filter((item) => !!item).forEach((item) => {
      // const o = defaultrdProjectUserList.value.find((i) => i.personId == item.id && i.documentsPostCode == row.documentsPostCode);
      rdProjectUserEntityList.push({
        // ...item,
        personId: item.personId,
        userName: item.personName || item.userName,
        userCode: item.personCode || item.userCode,
        userType: currentType.value,
        updateType: '新增',
        delFlag: 0,
        value: item.personCode,
        label: item.personName,
        personName: item.personName || item.userName,
        personCode: item.personCode || item.userCode,
      });
    });

    if (e.length == 0) {
      form.value.rdProjectUserEntity = form.value.rdProjectUserEntity.filter(
        (item) => item.userType != current.value.documentsPostCode,
      );
    }

    form.value.rdProjectUserEntity = form.value.rdProjectUserEntity
      .filter((f) => f.userType != current.value.documentsPostCode)
      .concat(rdProjectUserEntityList);

    if (oldrdProjectUserEntity.value) {
      oldrdProjectUserEntity.value
        .filter((item) => item.userType == current.value.documentsPostCode)
        .forEach((item, index) => {
          const i = form.value.rdProjectUserEntity.findIndex(
            (oi) => oi.userType == current.value.documentsPostCode && oi.personId == item.personId,
          );
          if (i < 0) {
            form.value.rdProjectUserEntity.push({
              ...item,
              delFlag: 1,
              updateType: '删除',
            });
          } else {
            item.delFlag = 0;
            form.value.rdProjectUserEntity[i] = item;
          }
        });
    }
  } else {
    // form.rdProjectUserEntity = [];
    form.value.rdProjectUserEntity = form.value.rdProjectUserEntity
      .filter((f) => f.documentsPostCode == 0 || f.documentsPostCode == 2)
      .map((item) => {
        if (item.userType == current.value.documentsPostCode) {
          return {
            ...item,
            delFlag: 1,
          };
        } else {
          return {
            ...item,
          };
        }
      });
  }

  emit('selected', form.value);
};

defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
.block .content {
  padding: 0 !important;
}

.card-detail {
  padding: 0 !important;
}

.wd-cell {
  padding-left: 0 !important;
}

.wd-card__title {
  border-left: 4px solid #2e5cf6 !important;
}

.pm-table {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;

  .pm-title {
    box-sizing: border-box;
    padding-left: 20rpx;
    margin: 40rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    border-left: 8rpx solid #2e5cf6;
    border-radius: 4rpx;
  }

  .pm-row {
    display: flex;
    min-height: 60rpx;
    border-bottom: 1px solid #f6f0f0;

    .pm-label {
      display: flex;
      align-items: center;
      width: 20%;
      font-size: 26rpx;
      color: #979494;
    }

    .pm-value {
      display: flex;
      flex: 1;
      align-items: center;
      font-size: 26rpx;
      color: #333;
    }
  }
}

.sign-main {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // width: 100%;
  // margin: 20rpx 0;
  position: fixed;
  right: 0rpx;
  bottom: 40rpx;
  width: 160rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: white;
  text-align: center;
  background-color: rgb(77 128 240);

  // border-radius: 50%;
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
}

:deep(.label) {
  width: 160rpx !important;
}

.result-tag {
  padding: 6rpx 14rpx;
  margin: 2rpx 0;
  font-size: 24rpx;
  color: white;
  background-color: #87d068;
  border-radius: 4rpx;
}

.sign-main-show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .sign-main-show-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    margin-bottom: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #818181;
    border-bottom: 1px solid #e3e3e3;
  }

  .sign-main-show-line {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    padding: 20rpx;
    margin: 20rpx 0;
    border: 4rpx solid #d0dbff;
    border-radius: 10rpx;
  }

  .sign-main-show-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    border-top: 1px solid #e3e3e3;
  }
}

.info-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-list-main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10rpx;
  margin: 10rpx 0;
  border: 1px solid #e3e3e3;
  border-radius: 8rpx;

  .info-list-row {
    display: flex;
    width: 100%;

    .info-list-label {
      width: 150rpx;
      font-size: 28rpx;
      color: #808080;
    }

    .info-list-value {
      display: flex;
      flex: 1;
      align-items: center;
      width: 0;
      word-break: break-all;
      white-space: pre-line;
    }
  }
}

.craft-row {
  display: flex;
  align-items: center;

  .craft-row-img-main {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 0;
  }
}

.craft-row-img {
  width: 240rpx;
  height: 240rpx;
}

.form-demandDesc {
  align-items: flex-start !important;

  .text {
    word-break: break-all;
  }
}
.info-row-item {
  padding: 6rpx 0;
  word-break: break-all;

  // border-bottom: 1px solid #f2f2f2;
}

.text {
  word-break: break-all;
  word-wrap: break-word;
}

.flow-btn-fixed {
  width: 100%;
  background-color: white;
  border-top: 1px solid #f2f2f1;
  // position: fixed;
  // bottom: 0;
  // left: 0;
  // right: 0;
}

.btn_group {
  display: flex;
  justify-content: space-between;

  // margin: 0rpx 0 20rpx;
  // border-bottom: 1px solid #f2f2f1;

  .btn {
    display: flex;

    // width: 49%;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    // height: 40px;
    min-height: 40px;
    padding: 10rpx 0;
    font-size: 24rpx;
    color: black;

    // background-color: white !important;
    background-color: #dbecff !important;
    border-left: 1px solid #f7f7f7;
    border-radius: 0 !important;

    // color: white;
    border-radius: 6rpx;

    .btn-icon {
      width: 40rpx;
      height: 40rpx;
      margin-bottom: 8rpx;
    }
  }

  .danger {
    background-color: #f56c6c;
  }

  .primary {
    background-color: #409eff;
  }
}

:deep(.uni-date__x-input) {
  line-height: inherit;
  font-size: 14px;
  color: #999;
}

.blocks {
  display: flex;
  align-items: center;
  margin-top: 32rpx;
  margin: 0 26rpx;
  width: 100%;
  border-bottom: 1px solid #f7f7f7;
  .label {
    // margin-bottom: 20rpx;
    font-size: 14px;
    color: #666;
    min-width: 160rpx;
    // font-weight: bold;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-wrap: wrap;
    padding: 20rpx;
    min-height: 32rpx;
    // justify-content: space-between;
    :deep(.uni-date__x-input) {
      color: #666;
    }
    .date-picker {
      flex: 1;

      text-align: center;
      background-color: #f7f7f7;
      border-radius: 8rpx;
    }

    .select-box {
      flex: 1;

      // background-color: #f7f7f7;
      border-radius: 8rpx;

      :deep(.select-row) {
        padding: 0;
        background: none;
      }
    }

    input {
      flex: 1;
      height: 33rpx;
      padding: 0 12rpx;
      font-size: 26rpx !important;
      // background-color: #f7f7f7;
      // border: 1rpx solid #f7f7f7;
      border-radius: 8rpx;

      .input-placeholder {
        color: #8a929f;
      }
    }

    .btn {
      flex: 1;
      padding: 16rpx;
      color: #999;
      text-align: center;
      background-color: #f7f7f7;
      border: 1rpx solid #dedede;
      border-radius: 8rpx;

      ~ .btn {
        margin-left: 24rpx;
      }

      &.primary {
        color: #fff;
        background-color: #007aff;
        border-color: #007aff;
      }
    }
  }
}
// :deep(.uni-date__x-input) {
//   color: #333;
// }
:deep(.uni-textarea-textarea) {
  font-size: 14px;
}
</style>
